<template>
  <view class="by-dialog flex-row flex-center" :class="{show:modelValue}"  @touchmove.stop.prevent>
    <view class="dialog-content" :class="{show:modelValue}">
      <slot name="title"></slot>
      <view class="text-center">
        <text class="text-32 color-t1 text-bold">{{title}}</text>
      </view>
      <slot>
        <view class="text-center margin-top-30">
          <text class="text-30 color-t1 content">{{content}}</text>
        </view>
      </slot>

      <view class="flex-row flex-center margin-top-46">
        <view v-if="showCancel" :class="{'margin-right-40' :showConfirm}">
          <by-button :text="cancelText" :check-login="false" width="238rpx" height="78rpx" pain type="gray" @click="cancel"/>
        </view>

        <view v-if="showConfirm">
          <by-button :text="confirmText" :check-login="false" width="238rpx" height="78rpx" @click="confirm"/>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
interface IProps{
  title?: string
  content?: string
  modelValue: boolean
  showCancel: boolean
  cancelText: string
  showConfirm: boolean
  confirmText: string
  watchBack: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  modelValue: true,
  showCancel: true,
  showConfirm: true,
  cancelText: '取消',
  confirmText: '确定',
  watchBack: false
})

const $emit = defineEmits(['update:modelValue', 'close', 'cancel', 'confirm'])

function cancel() {
  close()
  $emit('cancel', false)
}

function close() {
  $emit('update:modelValue', false)
  $emit('close', false)
}

function confirm() {
  close()
  $emit('confirm')
}

if (props.watchBack) {
  onBackPress(() => {
    if (props.modelValue) {
      close()
      return true
    }
  })
}
</script>

<style scoped lang="scss">
@include setMargin(top, 46);

.by-dialog{
  @include position(fixed, 0, 0, 0, 0, 200);
  background: $color-bg-mask;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out;

  &.show{
    opacity: 1;
    visibility: visible;
  }

  .dialog-content{
    width: 632rpx;
    padding:44rpx 50rpx 55rpx;
    background: $color-white;
    border-radius: 16rpx;
    transform: scale(.7);
    transition: all .3s ease-in-out;

    &.show{
      transform: scale(1);
    }

    .content{
      line-height: 40rpx;
    }

  }

}
</style>
